import { memo, useRef } from 'react';
import type { ReactNode, FC } from 'react';
import type { CarouselRef } from 'antd/lib/carousel';
import { Carousel } from 'antd';

import { NewAlbumWrapper } from './style';
import CommonHeader from '@/components/common-header';
import { useAppSelector, shallowEqualApp } from '@/store/hooks';
import AlbumItem from '@/components/album-item';
interface IProps {
  children?: ReactNode;
}

const NewAlbum: FC<IProps> = (props) => {
  const carouselRef = useRef<CarouselRef>(null);
  function handlePreBtn() {
    carouselRef.current?.prev();
  }
  function handleNxtBtn() {
    carouselRef.current?.next();
  }
  const { items } = useAppSelector(
    (state) => ({
      items: state.recommended.newAlbums,
    }),
    shallowEqualApp
  );
  return (
    <NewAlbumWrapper>
      <CommonHeader
        icon={'sprite_02'}
        iconShow={true}
        name={'新碟上新'}
        moreLink={'/discover/release'}
        keywords={[]}
      ></CommonHeader>
      <div className="album">
        <div className="banner">
          <Carousel ref={carouselRef} dots={false}>
            {[0, 1].map((item) => {
              return (
                <div key={item}>
                  <div className="album-list">
                    {items.slice(item * 5, (item + 1) * 5).map((album) => {
                      return <AlbumItem item={album} key={album.id} />;
                    })}
                  </div>
                </div>
              );
            })}
          </Carousel>
        </div>
        <button className="btn-pre sprite_02" onClick={handlePreBtn}></button>
        <button className="btn-nxt sprite_02" onClick={handleNxtBtn}></button>
      </div>
    </NewAlbumWrapper>
  );
};

export default memo(NewAlbum);
